<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <title>Document</title>
        <script type="text/javascript" src="../../examples/lib/jquery.js"></script>
        <script type="text/javascript" src="../jTweener.js"></script>		<script type="text/javascript" src="../easing.js"></script>		<script type="text/javascript" src="../easing-more.js"></script>
        <style type="text/css">
            .anim{
                position:absolute;
                width:50px;
                height:50px;
                background:#f00;
            }

            #anim5{
                filter:alpha(opacity=50);
            }
        </style>    </head>    <body>        <div id="anim1" class="anim"></div>
        <div id="anim2" class="anim" style="background:blue;top:60px" onclick="offsetTween()"></div>
        <div id="anim3" class="anim" style="background:green;top:110px"></div>
        <div id="anim4" class="anim" style="background:olive;top:160px"></div>
        <div id="anim5" class="anim" style="background:black;top:210px;left:10px;"></div>

        <script>

            // проверка getter/setter
            var gsObj = function(){
                var val = 20;
                var elem = $('#anim4');

                return {                    value: function(){
                        if (!arguments.length) {
                            return val;
                        } else {
                            val = Math.round(arguments[0]);
                            elem.css({top: val * 2, left: val});
                        }                    }
                }

            }();

            function offsetTween(){
                jTweener.removeTween($('#anim2'));
                jTweener.addTween($('#anim2'), {left: '+=100', time: 1});
            }

            function startTests(){
                jTweener.addTween($('#anim1'), {time: 2, 'background-color': '#ffcc00'});
                jTweener.addTween($('#anim3'), {time:10, left: 500, namespace: 'ns2'});
                jTweener.addTween(gsObj, {time:2, value: 200, transition: 'easeinoutcubic'});

                // тест opacity
                jTweener.addTween($('#anim5'), {time: 2, opacity: 0, left: 200, delay: 0.5});
            }

        </script>

        <div style="position:relative;top:400px">
            <input type="button" value="Запуск" onclick="startTests()" />            <input type="button" value="Остановить все" onclick="jTweener.removeTween()" />            <input type="button" value="Остановить для #anim3" onclick="jTweener.removeTween($('#anim3'))" />            <input type="button" value="Остановить для ns 'ns2'" onclick="jTweener.removeTween('ns2')" />
            <input type="button" value="Остановить для ns 'ns2' и #anim1" onclick="jTweener.removeTween('ns2', $('#anim1'))" />
            <input type="button" value="Остановить для ns 'ns2' и #anim3" onclick="jTweener.removeTween('ns2', $('#anim3'))" />
        </div>    </body></html>
